<template>
  <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/manage/count' }">统计</el-breadcrumb-item>
        <el-breadcrumb-item>统计</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row type="flex" justify="space-between" class="count-el-row">
        <el-col :span="12">
            <el-radio-group v-model="type" @change="showChart">
                <el-radio-button label="销售额统计"></el-radio-button>
                <el-radio-button label="商品类型额占比"></el-radio-button>
            </el-radio-group>
        </el-col>
        <el-col :span="12">
            <el-col v-if="type == '销售额统计' || type == '商品类型额占比'" :span="8">
                <label>统计方式：</label>
                <el-select v-model="searchParams.type" placeholder="请选择统计方式" @change="showChart" class="count-el-select">
                    <el-option label="年" value="year" />
                    <el-option label="季度" value="quarter" />
                    <el-option label="月" value="month" />
                </el-select>
            </el-col>
            <el-col v-if="type == '销售额统计' || type == '商品类型额占比'" :span="16">
                <template v-if="type == '商品类型额占比'">
                    <el-select v-if="searchParams.type" v-model="searchParams.year" type="year" placeholder="年" @change="showChart" class="count-el-select">
                        <el-option v-for="num of [2020, 2019, 2018]" :key="num" :label="num" :value="num" />
                    </el-select>
                    <label v-if="searchParams.type"> 年 </label>
                    <el-select v-if="searchParams.type == 'month'" v-model="searchParams.month" placeholder="月" @change="showChart" class="count-el-select">
                        <el-option v-for="num of 12" :key="num" :label="num" :value="num" />
                    </el-select>
                    <label v-if="searchParams.type == 'month'"> 月 </label>
                    <el-select v-if="searchParams.type == 'quarter'" v-model="searchParams.quarter" placeholder="季度" @change="showChart" class="count-el-select">
                        <el-option v-for="num of 4" :key="num" :label="num" :value="num" />
                    </el-select>
                    <label v-if="searchParams.type == 'quarter'"> 季度 </label>
                </template>
            </el-col>
        </el-col>
    </el-row>

    <div class="total" id="myChart" ref="myChart"></div>
  </div>
</template>

<script>
// import echarts from 'echarts'

 import echarts from "echarts/lib/echarts";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/pie";
import "echarts/lib/chart/scatter";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/legendScroll";

import {
    getCountData,
    getProportionData,
    
} from "../../service/count";
import {
    // mapState,
    // mapGetters,
    // mapMutations,
    // mapActions
} from "vuex";
export default {
    data(){
        return{
            type: "销售数据统计",
                searchParams: {
                    type: "year",
                    year: 2020,
                    month: 11,
                    quarter: 4,
                },
                // 统计图数据
            countAxisData: [],
            countSeriesData: [],
            // 占比图数据
            proportionAxisData: [],
            proportionSeriesData: [],
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.showChart();
        });
    },
    methods: {
        async showChart() {
            echarts.dispose(this.$refs.myChart);
            let myChart = echarts.init(this.$refs.myChart);
            if (this.type == "销售额统计") {
                /**
                  销售额统计
                */
                this.countAxisData = [];
                this.countSeriesData = [];
                let response = await getCountData(
                    this.searchParams.type,
                    this.searchParams.year
                );
                // response.data.status should be 1
                let resultArray = response.data.sort((a, b) => a.time - b.time);
                
                this.unit =
                    this.searchParams.type == "year" ?
                    "年" :
                    this.searchParams.type == "quarter" ?
                    "季度" :
                    "月";
                    console.log(resultArray);
                for (let item of resultArray) {
                    this.countAxisData.push(item.time + this.unit);
                    this.countSeriesData.push(item.sum);
                }
                myChart.setOption(this.countOptions, true);
            } else if (this.type == "商品类型额占比") {
                /**
                  商品销售额占比
                */
                this.proportionAxisData = [];
                this.proportionSeriesData = [];
                let response = await getProportionData(
                    this.searchParams.type,
                    this.searchParams.year,
                    this.searchParams.type == "quarter" ?
                    this.searchParams.quarter :
                    this.searchParams.month
                );
                // response.data.status should be 1
               
                let resultArray = response.data.sort((a, b) => a.value - b.value);
                //  console.log(resultArray);
                for (let item of resultArray) {
               
                    this.proportionAxisData.push(item.type);
                    var a=item.type;
                    var b=item.sum;
                    this.proportionSeriesData.push({name:a,value:b});
                //   console.log(this.proportionAxisData)
                }
                // console.log(this.proportionSeriesData)   
                myChart.setOption(this.proportionOpitons, true);
            }
        },
    },
    computed: {
        countOptions() {
            return {
                title: {
                    text: "销售额统计",
                    x: "center",
                },
                tooltip: {},
                xAxis: {
                    name: this.unit,
                    data: this.countAxisData,
                },
                yAxis: {
                    name: "元",
                },
                series: [{
                    name: "数量",
                    type: "bar",
                    data: this.countSeriesData,
                }, ],
            };
        },
        proportionOpitons() {
            
            return {
                title: {
                    text: "商品类型的销售额占比",
                    subtext: "2018-2020",
                    x: "center",
                },
                tooltip: {
                    trigger: "snapshotType",
                    formatter: "{a} <br/>{b} : {c} ({d}%)",
                },
                legend: {
                    icon: "rect",
                    type: "scroll",
                    orient: "vertical",
                    left: "50",
                    data: this.proportionAxisData,
                },
                series: [{
                    name: "访问来源",
                    type: "pie",
                    radius: "55%",
                    center: ["50%", "60%"],
                    data: this.proportionSeriesData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                        },
                    },
                }, ],
            };
        },
        
    },
}
</script>

<style>
.count-el-row {
    width: 100%;
    margin: 30px 0;
}

.count-el-select {
    width: 80px;
}

.total {
    width: 100%;
    height: 500px;
}
</style>